<template>
  <vue-seamless-scroll
    :data="list"
    class="seamless-warp"
    :class-option="classOption"
  >
    <div
      v-for="(item, index) in list"
      :key="index"
      class="table-body"
      :style="{ background: index % 2 === 0 ? '#18395F' : '#0F2747' }"
    >
      {{ item }}
    </div>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'About',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: [],
      // 表格滚动配置
      classOption: {
        step: 0.3, // 数值越大速度滚动越快(默认1)
        limitMoveNum: 8, // 开启无缝滚动的数据量(默认5)
        hoverStop: true, // 是否开启鼠标悬停stop
        openTouch: false, // 移动端开启touch滑动
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    for (let i = 1; i <= 200; i++) {
      this.list.push(i)
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  height: 300px;
  overflow: auto;
}
.list_item {
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  box-sizing: border-box;
}
.seamless-warp {
  height: 100px;
  overflow: hidden;
}
</style>
